<template>
    <div class="shop-container">
        <ShopHeader></ShopHeader>
        <div class="tab">
            <div class="tab-item">
                <router-link to="/shop/goods" :class="{activeItem:'/shop/goods'==$route.path}" @click="goTo('/shop/goods')">
                    点餐
                </router-link>
            </div>
            <div class="tab-item">
                <router-link to="/shop/info" :class="{activeItem:'/shop/info'==$route.path}" @click="goTo('/shop/info')">
                    评价
                </router-link>
            </div>
            <div class="tab-item">
                <router-link to="/shop/ratings" :class="{activeItem:'/shop/ratings'==$route.path}" @click="goTo('/shop/ratings')">
                    商家信息
                </router-link>
            </div>
        </div>
        <router-view>

        </router-view>
    </div>
</template>

<script>
    import ShopHeader from '../../components/shopHeader/shopHeader.vue'

    export default {
        name: "shop",
        mounted(){
            this.$store.dispatch('getShopInfo')
        },
        methods:{
            goTo(path){
                this.$router.replace(path)
            }
        },
        components:{
            ShopHeader
        }
    }
</script>

<style scoped lang="scss">
    .shop-container {
        margin-top: -69px;
        .tab {
            width: 100%;
            display: flex;
            border-bottom: 1px solid #6d6d72;
            text-align: center;
            padding-top: 50px;
            .tab-item {
                width: 30%;
                justify-content: space-around;
            }

            .activeItem {
                color: red;
                font-weight: bolder;

                a {
                    color: red
                }
            }
        }
    }
</style>